UIWebView执行JS的几个注意点

发表于   |   分类于   |  

context

这是一个给培训的同学写的Demo,概括起来的几个特点是:

  • 无法和服务器沟通,只能在iOS端这里更改网页
  • 需要隐藏两个html组件

这是没有修改的网页的地址 ,可以看到,顶部和底部有网页原来的两个条,需要隐藏,来实现如下的效果:

执行JS的坑

首先, 在电脑端利用浏览器进行调试 , 得到可正确执行的 JS代码,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function getElementsClass(classnames){
    var classobj = new Array();       //定义数组

    var classint = 0;      //定义数组的下标

    var tags = document.getElementsByTagName("*");      //获取HTML的所有标签

    for (var i in tags) {      //对标签进行遍历

        if (tags[i].nodeType == 1) {//判断节点类型

            if (tags[i].getAttribute("class") == classnames) {//判断和需要CLASS名字相同的，并组成一个数组

                classobj[classint] = tags[i];

                classint++;

            }

        }

    }

    return classobj;//返回组成的数组

}

window.onload = function() {

    var topBar = getElementsClass("navbar");
    topBar[0].style.display = "none";
    topBar[1].style.display = "none";
    var bottomBar = getElementsClass("toolbar");
    bottomBar[0].style.display = "none";
}

执行JS

重点来了 ,由于在公司开发的 ,都有服务器端作为配合,所以用UIWebView执行JS来修改html代码这种需求 ,对工作中的开发者并不常见. 所以在使用的时候, 遇到了一些问题:

进入头文件:

找到了可以直接拼接 JS 的方法:

1
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

然后就是拼接了,看到这么多行, 肯定不能用手写了 .于是 ,我很得意的利用正则表达式工具,给每行拼接了成了 [string appendString:@"blablabla..."]; 这样的形式

发现不执行,重点是修改JS代码也变得十分困难了.后来才愚蠢的想到可以将JS放到文件中… ,使用如下代码加载:

1
2
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"disappear" ofType:@"js"];
  NSString *jsString = [[NSString alloc] initWithContentsOfFile:filePath];

再一个关键的问题, 就是何时让 UIWebView执行这段代码 ,首先想到的,是代理方法 .

一共有四个代理方法 ,根据名字可以非常容易知道其调用的时机 .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 将要开始加载请求
 */
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
/**
 * 已经开始加载请求
 */
- (void)webViewDidStartLoad:(UIWebView *)webView;
/**
 * 请求加载完毕
 */
- (void)webViewDidFinishLoad:(UIWebView *)webView;
/**
 * 请求加载失败
 */
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;

一开始想到的是 , 加载完毕 , 然后执行 JS .于是在加载完毕代理方法中拼接JS ,结果不执行.

后来尝试了开始加载的两个方法.

经过多方尝试. 写出如下代码:

1
2
3
4
5
6
7
8
9
self.mainWebView.delegate        = self;

   NSString *filePath = [[NSBundle mainBundle] pathForResource:@"disappear" ofType:@"js"];
   NSString *jsString = [[NSString alloc] initWithContentsOfFile:filePath];
   [self.mainWebView stringByEvaluatingJavaScriptFromString:jsString];

   NSURL        *url     = [NSURL URLWithString:@"http://m.shijieyou.com/mdetail-3445464-0-%5BLjava.lang.String;@6625086c"];
   NSURLRequest *request = [NSURLRequest requestWithURL:url];
   [self.mainWebView loadRequest:request];

成功实现功能